<template >
  <component :is="item.children?.length ? 'a-sub-menu' : 'a-menu-item'" v-for="item in props.routers" :key="item.path">
    <template v-if="!item.children?.length">
      <component :is="item.meta.icon"></component>
      <!-- <home-outlined /> -->
      <span>{{ item.meta.title }}</span>
    </template>

    <template #title v-if="item.children?.length">
      <span>
        <user-outlined />
        <span>{{ item.meta.title }}</span>
      </span>
    </template>
    <MenuRender v-if="item.children?.length" :routers="item.children" />
  </component>
</template>
<script lang="ts" setup>

const props = defineProps(['routers'])

</script>
<style lang="scss"></style>
